<template>
  <div class="body">
    <div class="details">
      <div class="details-left">
        <div class="upper-left" :data="detailsSong">
          <img v-lazy="detailsSong.coverImgUrl" />
          <div class="img-right">
            <div>
              <h2>{{ detailsSong.name }}</h2>
            </div>
            <div>
              <img
                src="http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg?param=40y40"
              />
              <a>{{ detailsSong.creator.nickname }}</a>
              <span
                >{{
                  dayjs(detailsSong.createTime).format("YYYY-MM-DD")
                }}创建</span
              >
            </div>
            <div :data="dynamic">
              <el-button type="primary"
                ><el-icon :size="25"><VideoPlay /></el-icon>播放</el-button
              ><el-button type="primary"
                ><el-icon :size="20"><Plus /></el-icon
              ></el-button>
              <el-button type="success"
                ><el-icon :size="20"><FolderAdd /></el-icon>({{
                  dynamic.bookedCount
                }})</el-button
              >
              <el-button type="info"
                ><el-icon :size="20"><Position /></el-icon
                >{{ dynamic.shareCount }}</el-button
              >
              <el-button type="warning"
                ><el-icon :size="20"><Bottom /></el-icon
              ></el-button>
              <el-button type="danger"
                ><el-icon :size="20"><ChatDotSquare /></el-icon
                >{{ dynamic.commentCount }}</el-button
              >
            </div>
            <div>
              <b>标签:</b>
              <el-button
                round
                v-for="tag in detailsSong.tags"
                :key="tag"
                @click="toSongList(tag)"
                >{{ tag }}</el-button
              >
            </div>
            <p :class="isShow ? 'newDescription' : 'description'">
              介绍:{{ detailsSong.description }}
            </p>
            <p class="isShow" v-if="isShow" @click="changeStyle">收起</p>
            <p class="isShow" v-else @click="changeShow">展开</p>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="table-top">
          <h2>歌曲列表</h2>
          <span>{{ limit }}首歌</span>
          <a>生成外链播放器</a>
          <span class="playCount">播放:{{ dynamic.playCount }}次</span>
        </div>
        <el-table :data="trackAll" stripe style="width: 100%" max-height="870">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          />
          <el-table-column width="50">
            <template v-slot="{ row }">
              <Table-column
                ><el-icon class="x-large" @click="playSong(row.id)"
                  ><VideoPlay /></el-icon
              ></Table-column>
            </template>
          </el-table-column>
          <el-table-column label="歌曲标题" width="240">
            <template v-slot="{ row }"
              ><p>{{ row.name }}</p>
              <el-icon
                v-if="row.mv"
                :size="20"
                color="red"
                @click="toMv(row.mv)"
                ><Monitor /></el-icon
            ></template>
          </el-table-column>
          <el-table-column label="时长">
            <template v-slot="{ row }"
              ><p>{{ dayjs(row.dt).format("mm:ss") }}</p></template
            >
          </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手" />
          <el-table-column prop="al.name" label="专辑" />
        </el-table>
      </div>
      <div class="table-button">
        <p>查看更多内容,请下载客户端</p>
        <el-button type="danger" round>立即下载</el-button>
      </div>
      <div class="comment">
        <div>
          <h2>评论</h2>
          <span>共{{ dynamic.commentCount }}条评论</span>
        </div>
        <div class="commit-header">
          <span>
            <img
              src="http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg?param=40y40"
            />
          </span>
          <div>
            <el-form
              ref="commentFormRef"
              :model="commentForm"
              :rules="commentRules"
            >
              <el-form-item prop="textarea">
                <el-input
                  v-model="commentForm.textarea"
                  :rows="5.5"
                  type="textarea"
                  placeholder="请输入你的评论"
                  @focus="clearTest"
                />
              </el-form-item>
            </el-form>
            <div class="publish">
              <el-icon size="30px"><Star /></el-icon>
              <el-icon size="30px" class="icon"><Sunny /></el-icon>
              <div>
                <a>{{ commentForm.textarea.length }}</a>
                <el-button type="success" @click="addComment">发表</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="commit-footer"> -->
        <!-- <div class="commit-footer" v-if="hotComments?.length"> -->
        <div class="commit-footer">
          <h3>精彩评论</h3>
          <div v-for="hotComment in hotComments" :key="hotComment.commentId">
            <img v-lazy="hotComment.user.avatarUrl" class="footer-img" />
            <div class="footer-right">
              <div>
                <a>{{ hotComment.user.nickname }}</a>
                <!-- <img
                  src="http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg?param=40y40"
                /> -->
                : {{ hotComment.content }}
              </div>
              <div class="footer-fight-button">
                <span>{{ hotComment.timeStr }}</span>
                <div>
                  <a
                    ><el-icon size="25px"><Pointer /></el-icon
                    >{{ hotComment.likedCount }}</a
                  >
                  <a class="footer-a">回复</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="commit-footer" v-if="hotComments?.length"> -->
        <div class="commit-footer">
          <h3>最新评论({{ dynamic.commentCount }})</h3>
          <div v-for="comment in comments" :key="comment.commentId">
            <img v-lazy="comment.user.avatarUrl" class="footer-img" />
            <div class="footer-right">
              <div>
                <a>{{ comment.user.nickname }}</a>
                <!-- <img
                  src="http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg?param=40y40"
                /> -->
                :{{ comment.content }}
              </div>
              <div class="footer-fight-button">
                <span>{{ comment.timeStr }}</span>
                <div>
                  <a
                    ><el-icon size="25px"><Pointer /></el-icon
                    >{{ comment.likedCount == 0 ? "" : comment.likedCount }}</a
                  >
                  <a class="footer-a">回复</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="example-pagination-block" v-if="hotComments?.length"> -->
        <div class="example-pagination-block">
          <el-pagination
            v-model:currentPage="offset"
            v-model:page-size="limit"
            background
            layout="prev, pager, next"
            :total="total"
            @size-change="getComment"
            @current-change="getComment"
          />
        </div>
      </div>
      <div class="details-right">
        <div class="right-header">
          <h3>喜欢这个歌单的人</h3>
          <div class="right-img">
            <div
              v-for="item in detailsSong.subscribers"
              :key="item.userId"
              @click="toHomePag(item.userId)"
            >
              <img v-lazy="item.avatarUrl" />
            </div>
          </div>
        </div>
        <div class="right-footer">
          <h3>热门歌单</h3>
          <div v-for="hot in hotSongList" :key="hot.id">
            <img v-lazy="hot.coverImgUrl" />
            <div>
              <a class="right-footer-a" @click="changeId(hot.id)">{{
                hot.name
              }}</a>
              <p>by {{ hot.creator.nickname }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "DetailsSong",
};
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import {
  getCommentApi,
  getDetailsSongApi,
  getDynamicApi,
  getHotSongListApi,
  getTrackAllApi,
  postAddComment,
} from "@/api/discoverMusic/detailsSong";
import { useRoute, useRouter } from "vue-router";
import type {
  CommentsList,
  DetailSong,
  HotSongList,
  TrackAllList,
} from "@/api/discoverMusic/model/songList/detailsSong";
import {
  VideoPlay,
  Plus,
  FolderAdd,
  Position,
  Bottom,
  ChatDotSquare,
  Star,
  Sunny,
  Pointer,
  Monitor,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { useSongPlaying } from "@/stores/songPlaying";
// 使用ref定义的数据
const offset = ref(0); //刚开始要为0,否则hotComments无数据
const isShow = ref(false);
const route = useRoute();
const limit = ref(20);
const commentLimit = ref(10);
const total = ref(0);
const commentFormRef = ref<FormInstance>(); //表单校验数据
const trackAll = ref<TrackAllList>([]);
const comments = ref<CommentsList>([]);
const hotComments = ref<CommentsList>([]);
const hotSongList = ref<HotSongList>([]);

// 获取小菠萝数据
const store = useSongPlaying();
// const id = ref(route.query.id);为什么不能将其存储起来使用

// 使用reactive定义的数据
// 基本信息
const detailsSong = reactive<DetailSong>({
  id: 0,
  name: "",
  coverImgId: 0,
  coverImgUrl: "",
  createTime: 0,
  creator: {
    userId: 0,
    nickname: "",
  },
  description: "",
  tags: [],
  subscribers: [],
});
// 评论信息
const dynamic = reactive({
  commentCount: 0,
  shareCount: 0,
  playCount: 0,
  bookedCount: 0,
});
// 歌曲数据
const getDetailsSong = async () => {
  // onMounted(async () => {
  const res = await getDetailsSongApi(route.query.id as unknown as number);
  detailsSong.id = res.playlist.id;
  detailsSong.name = res.playlist.name;
  detailsSong.coverImgId = res.playlist.coverImgId;
  detailsSong.coverImgUrl = res.playlist.coverImgUrl;
  detailsSong.createTime = res.playlist.createTime;
  detailsSong.description = res.playlist.description;
  detailsSong.creator = res.playlist.creator;
  detailsSong.tags = res.playlist.tags;
  detailsSong.subscribers = res.playlist.subscribers;
};
onMounted(getDetailsSong);
/**
 * 2:获取当前歌单评论数据
 */
const getDynamic = async () => {
  // onMounted(async () => {
  const res = await getDynamicApi(route.query.id as unknown as number);
  dynamic.bookedCount = res.bookedCount;
  dynamic.commentCount = res.commentCount;
  dynamic.playCount = res.playCount;
  dynamic.shareCount = res.shareCount;
};
onMounted(getDynamic);

/**
 * 3:点击改变状态
 */
const changeStyle = () => {
  isShow.value = !isShow.value;
};
const changeShow = () => {
  isShow.value = !isShow.value;
};

/**
 * 4:获取歌曲列表数据
 */
const getTrackAll = async () => {
  // onMounted(async () => {
  const res = await getTrackAllApi(
    route.query.id as unknown as number,
    limit.value
  );
  trackAll.value = res.songs;
};
onMounted(getTrackAll);

/**
 * 5:获取当前歌单评论数据列表
 */
const getComment = async () => {
  const res = await getCommentApi({
    id: route.query.id as unknown as number,
    limit: commentLimit.value,
    offset: offset.value * limit.value,
  });
  comments.value = res.comments; //最新评论
  hotComments.value = res.hotComments; //精彩评论
  total.value = res.total;
};
onMounted(getComment);

/**
 * 6:获取热门歌单列表数据
 */
const getHotSongList = async () => {
  // onMounted(async () => {
  const res = await getHotSongListApi(route.query.id as unknown as number);
  hotSongList.value = res.playlists;
  console.log(2);
};
onMounted(getHotSongList);

/**
 * 7:点击标签去歌单页面
 */
const router = useRouter();
const toSongList = (tag: string) => {
  router.push({
    name: "SongList",
    query: {
      cat: tag,
    },
  });
};

/**
 * 8:点击热门更新歌单数据
 */
const changeId = async (id: number) => {
  await router.push({
    name: "DetailsSong",
    query: {
      id,
    },
  });
  await Promise.all([
    getDetailsSong(),
    getDynamic(),
    getComment(),
    getTrackAll(),
    getHotSongList(),
  ]);
};

/**
 * 9:点击喜欢这个歌单的人跳转到个人主页:无静态页面做不了
 */
const toHomePag = (useId: number) => {
  console.log(useId);
};

/**
 * 10:用户评论:表单校验,发送请求,获取最新数据
 */
// 定义要校验的数据
const commentForm = reactive({
  textarea: "",
});
const commentRules = reactive<FormRules>({
  textarea: [
    {
      required: true,
      min: 0,
      max: 140,
      message: "请将数字字数控制在0~140之间",
      trigger: "blur",
    },
  ],
});
const addComment = async () => {
  if (commentForm.textarea.length > 140) return;
  await postAddComment({
    t: 1,
    type: 2,
    id: route.query.id as unknown as number,
    content: commentForm.textarea,
  });
  commentForm.textarea = "";
  ElMessage.success("评论成功了");
  getComment();
};
const clearTest = () => {
  console.log(111);

  commentFormRef.value?.clearValidate();
};

/**
 * 11:点击播放按钮,播放歌曲
 */
const playSong = (id: number) => {
  store.getsongList(id);
};

/**
 * 12:点击跳转的播放mv页面
 */
const toMv = (id: number) => {
  console.log(111);

  router.push({
    name: "MV",
    query: {
      id,
    },
  });
};
</script>

<style scoped>
.body,
html {
  width: 100%;
  height: 100%;
  /* background-color: #f5f5f5; */
}
/* .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
} */
.details {
  width: 75%;
  height: 2910px;
  margin: 0 auto;
  background-color: #ffff;
  position: relative;
  border-right: 2px solid #626562;
  border-left: 2px solid #626562;
}
.details-left {
  width: 80%;
  height: 100%;
  /* border: 1px solid yellow; */
  padding: 60px 45px;
}
.details-right {
  width: 20%;
  height: 800px;
  position: absolute;
  /* border: 1px solid hotpink; */
  right: 0;
  top: 0;
}
.upper-left {
  display: flex;
  width: 100%;
  height: 250px;
  /* border: 1px solid khaki; */
}
.upper-left > img {
  display: inline-block;
  width: 250px;
  height: 100%;
  /* border: 1px solid darkgreen; */
  padding: 5px;
  margin-right: 40px;
}
.upper-left > div {
  display: inline-block;
  width: 580px;
  height: 100%;
  /* border: 1px solid salmon; */
  top: 0;
}
.img-right > :nth-child(1) {
  height: 15%;
  line-height: 40px;
  /* border: 1px solid teal; */
  font-size: 20px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.img-right > :nth-child(1) > h2 {
  width: 500px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.img-right > :nth-child(2) {
  height: 20%;
  /* border: 1px solid lawngreen; */
  line-height: 45px;
  color: #999;
}
.img-right > :nth-child(2) > a {
  color: #0c73c2;
  margin: 0 35px 0 15px;
}
.img-right > :nth-child(3) {
  height: 25%;
  /* border: 1px solid seagreen; */
  line-height: 55px;
}
.img-right > :nth-child(3) > :nth-child(2) {
  margin: -1px;
}
.img-right > :nth-child(4) {
  height: 20%;
  /* border: 1px solid lightcoral; */
  line-height: 50px;
}
.img-right > :nth-child(5) {
  height: 20%;
  /* border: 1px solid olivedrab; */
}
.description {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
.newDescription {
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
.isShow {
  float: right;
  color: #0c73c2;
}
.table {
  width: 817px;
  /* height: 1000px; */
}
.table-top {
  width: 817px;
  height: 50px;
  border-bottom: 3px solid red;
  line-height: 50px;
}
.table-top > h2 {
  display: inline-block;
  margin-right: 40px;
  font-weight: 400;
}
.table-top > a {
  color: #0c73c2;
  margin: 0 30px 0 400px;
}
.table {
  width: 816px;
  position: absolute;
  left: 45px;
  top: 300px;
  margin-top: 80px;
}
.playCount {
  position: absolute;
  right: 0;
  color: red;
}
.table-button {
  position: absolute;
  width: 816px;
  text-align: center;
  left: 45px;
  top: 1380px;
  /* border: 1px solid hotpink; */
  margin-bottom: 40px;
}
.table-button > p {
  margin-bottom: 15px;
}
.comment {
  position: absolute;
  left: 45px;
  width: 816px;
  top: 1500px;
  height: 50px;
  border-bottom: 2px solid red;
}
.comment > div > h2 {
  display: inline-block;
  margin-right: 40px;
}
.commit-header {
  width: 100%;
  display: flex;
  margin-top: 40px;
  /* border: 1px solid navy; */
}
.publish {
  margin-bottom: 30px;
}
.publish > div {
  display: inline-block;
}
.publish > div > a {
  display: inline-block;
  font-size: 15px;
  padding-right: 20px;
  font-weight: 600;
}
.commit-header > span {
  width: 80px;
  height: 80px;
  /* border: 1px solid seagreen; */
  margin-right: 30px;
}
.commit-header > div {
  width: 90%;
  /* position: absolute; */
  right: 300px;
}
.icon {
  margin: 0 520px 0 20px;
}
.commit-footer {
  position: relative;
  width: 100%;
  /* border: 1px solid hotpink; */
  margin-top: 50px;
}
.commit-footer > div {
  display: flex;
  padding: 25px 0;
  border-top-style: dotted;
}
.example-pagination-block {
  width: 150px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding: 30px 0 30px 0;
  /* margin-bottom: 50px; */
}
.footer-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 15px;
}
.footer-right > div > a {
  color: #0c73c2;
  margin-left: 10px;
}
.footer-fight-button {
  position: relative;
  margin-left: 10px;
  padding-top: 20px;
}
.footer-fight-button > div {
  position: relative;
  display: inline-block;
  color: #0c73c2;
}
.footer-fight-button > div > a {
  position: absolute;
  right: -650px;
  margin-left: 50px;
}
.footer-a {
  display: inline-block;
  width: 100px;
}
/* 右边元素的样式 */
.right-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 10px;
}
.right-img > div > img {
  width: 50px;
  height: 50px;
}
.right-header > h3 {
  margin-top: 30px;
  margin-bottom: 5px;
  border-bottom-style: groove;
}
.right-header > div {
  width: 100%;
  height: 150px;
  /* border: 1px solid lawngreen; */
  margin-bottom: 30px;
}
.right-header > div > img {
  width: 20%;
  height: 45px;
  border: 1px solid forestgreen;
  margin: 15px 0 0 0;
}
.right-footer > h3 {
  border-bottom-style: groove;
  margin-bottom: 25px;
}
.right-footer > div {
  display: flex;
  margin-bottom: 10px;
}
.right-footer > div > img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.right-footer > div > img > a {
  width: 80%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.right-footer-a {
  width: 150px;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.x-large {
  font-size: x-large;
}
</style>
